<template>
	<view>
		<!-- 备注 -->
		<popupBox ref="remark" type="bottom" :isSlot="true">
			<view class="remark-box">
				<view class="top">
					<view class="cancel" @click="closeRemark">
						取消
					</view>
					<view class="title">
						备注
					</view>
					<view class="confirm" @click="confirmRemark">
						提交
					</view>
				</view>
				
				<view class="textarae">
					<textarea v-model="b_remark" maxlength="200" placeholder="无备注"></textarea>
				</view>
				<view class="tip">
					最多可输入200个字
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup.vue';
	export default {
		components: {
			popupBox
		},
		data() {
			return {
				b_remark: ""
			}
		},
		methods: {
			closeRemark(){
				this.$refs.remark.close()
			},
			
			confirmRemark(){
				this.$emit("confirm", { value: this.b_remark })
				this.closeRemark()
			},
			
			open(remark = ""){
				this.$refs.remark.open()
				this.b_remark = remark
			},
		}
	}
</script>

<style scoped lang="scss">
.remark-box{
	padding: 36rpx 22rpx 300rpx;
	box-sizing: border-box;
	.top{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		.cancel{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
		}
		.title{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
		}
		.confirm{
			font-weight: bold;
			font-size: 30rpx;
			color: #E72A2A;
			line-height: 42rpx;
		}
	}
	.textarae{
		width: 100%;
		height: 360rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		border: 2rpx solid #F5F5F5;
		padding: 24rpx 28rpx;
		box-sizing: border-box;
		margin-top: 62rpx;
		textarea{
			width: 100%;
			height: 100%;
		}
	}
	.tip{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
}
</style>
